<!--
 * @Author: ljc
 * @Date: 2023-05-05 14:09:40
 * @LastEditors: g05047
 * @LastEditTime: 2023-06-15 16:50:20
 * @Description: 任务详情专家分配情况表
-->
<template>
  <div style="height: 100%;">
    <rk-grid ref="allocationExpertRef"
      dataUrl="/reviewtask/getAssignProjects"
      :params="queryParams"
      :columns="tableColumns"
      :boxConfig='false'
      :autoLoad="false"
      :pagerConfig='false'>
      <template #expertOperation="{ row }">
        <el-tag v-for="item in row.expertList"
          class="expert-tag"
          :key="item.expertId"
          :disable-transitions="false">
          {{ item.name }}
        </el-tag>
      </template>
    </rk-grid>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import XEUtils from 'xe-utils'

const props = defineProps({
  taskDetailData: { type: [Object], default: () => ({}) }
})
watch(
  () => props.taskDetailData,
  (newValue, oldValue) => {
    nextTick(() => {
      if (!XEUtils.isEmpty(newValue)) {
        queryParams.taskId = newValue.value.taskId
        allocationExpertRef.value.searchEvent()
      }
    })
  },
  { deep: true, immediate: false }
)
const allocationExpertRef = ref('')
// 查询参数
let queryParams = reactive({
  taskId: undefined,
})
const tableColumns = reactive([
  {
    field: 'adName', title: '地区名称', width: 250, align: 'left',
  },
  { field: 'agName', title: '单位名称', width: 180, align: 'left', },
  { field: 'proName', title: '项目名称', width: 250, align: 'left', cellRender: { name: 'xmYHS' } },
  { field: 'proCode', title: '项目编码', width: 200, align: 'left', },
  {
    field: 'expertList', title: '已分配评审专家', align: 'left', width: 400, showOverflow: false,
    fixed: 'right', slots: { default: 'expertOperation' }, className: 'allot-expert'
  },
])
</script>
<style lang="scss" scoped>
:deep(.allot-expert) {
  line-height: 30px;
}
.expert-tag {
  margin-right: 5px;
}
.w-200px {
  width: 200px;
}
</style>